/*
 * @Author: kanglang
 * @Date: 2020-09-18 11:03:02
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-03-19 14:30:10
 * @Description: 
 */
import React, { Component } from 'react';
import { StyleSheet, View, Image, TouchableOpacity, Text } from 'react-native';
import { px2dp } from '../../../common/styles';
import { home4sGo } from '../../../image';

/**
 * @modifyAuthor kanglang
 * @description 物流三端入口卡片
 * @createDate 2020/8/24
 */

export default class WlCard extends Component {
    constructor(props) {
        super(props);
    }
    handleFunc = () => {
        this.props.click && this.props.click();
    }
    render() {
        const { style, titleOne, titleTwo, cardIcon } = this.props;
        return (
            <TouchableOpacity
                style={[styles.btnWrap, style]}
                activeOpacity={1}
                onPress={this.handleFunc}
            >
                <View style={styles.centerStyle}>
                    <Image style={styles.cardAvatar} source={cardIcon ? cardIcon : require('../../../image/icons/defaultman.png')} />
                    <Text numberOfLines={1} style={styles.titleOne}>{titleOne}</Text>
                    <Text style={styles.titleTwo}>{titleTwo}</Text>
                    <View style={styles.goWrap}>
                        <Image
                            style={styles.goIcon}
                            source={home4sGo}
                            resizeMode='contain'
                        />
                    </View>
                </View>
            </TouchableOpacity>
        );
    }
}
const styles = StyleSheet.create({
    btnWrap: {
        flex: 1,
        backgroundColor: '#fff',
        borderRadius: px2dp(6) * 2,
        paddingBottom: px2dp(12) * 2,
        shadowColor: 'rgba(0, 0, 0, 0.05)',
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowRadius: 6,
        elevation: 2,
    },
    cardAvatar: {
        width: px2dp(52) * 2,
        height: px2dp(52) * 2,
        marginTop: px2dp(27),
        borderRadius: px2dp(52) * 2
    },
    titleOne: {
        color: '#343332',
        fontSize: px2dp(14) * 2,
        marginTop: px2dp(31)
    },
    titleTwo: {
        color: '#999896',
        fontSize: px2dp(12) * 2
    },
    centerStyle: {
        alignItems: 'center'
    },
    goWrap: {
        // backgroundColor: "rgba(0,0,0,0.1)",
        paddingTop: px2dp(8),
        paddingBottom: px2dp(8),
        borderRadius: px2dp(32),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: px2dp(24)
    },
    goIcon: {
        height: px2dp(32),
    }
});
